<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      p {
        font-size: 20px;
      }
      span {
        font-size: 30px;
      }
      /* 
        伪元素表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
            伪元素使用::开头

            ::first-letter表示第一个字母
        
            ::first-line表示第一行
        
            ::selection表示选中的内容

            ::before 元素的开始位置
            ::after 元素的最后
                -before和after必须结合content属性来使用
            */
      p::first-letter {
        font-size: 50px;
      }
      p::first-line {
        background-color: yellow;
      }
      p::selection {
        background-color: yellowgreen;
      }
      /* div::before{
            content:'abc';
            color: tomato;
        }
        div::after{
            content: 'hhh';
            color: violet;
        } */

      div::before {
        content: "(";
        color: yellowgreen;
      }
      div::after {
        content: ")";
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <!-- <q>hello</q> -->
    <div>Hello hello how are you</div>

    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit,
      laudantium? Necessitatibus similique, voluptates, eos et, amet deserunt
      nulla libero minus vero soluta explicabo aliquid illo provident
      consequuntur aut facilis veritatis!
    </p>
  </body>
</html>
